body {
	margin: 0;
	background-color: #000;
	color: #fff;
	/*font-family: Monospace;*/
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-size: 13px;
	line-height: 24px;
	overflow-x: hidden;
  	overflow-y: hidden;
}

a {
	color: #ff0;
	text-decoration: none;
	pointer-events: auto;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

canvas {
	display: block;
}

#info {
	position: absolute;
	top: 0px;
	color: #ffff00;
	background-color: #222;
	width: inherit;
	font-size: inherit;
	padding: 0px;
	box-sizing: border-box;
	text-align: left;	
	z-index: 3; /* TODO Solve this in HTML */
}

#object-category-selector, #object-track-id-editor, #scene-selector, #frame-selector, #camera-selector, #obj-ids-of-scene
{
	background-color: inherit;
	color: inherit;
	border-width: 0;
	
}

#maincanvas {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	padding: 0px;
	box-sizing: border-box;
	text-align: left;
	align-content: right;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	/*z-index: 1; /* TODO Solve this in HTML */
}
#maincanvas-svg {
	
	width: 100%;
	height:100%;
	border: 0px;
	padding: 0px;

	stroke: #00ff0088;
	stroke-width: 2px;
	fill: #00ff0022;
}

/* 
this css can be moved to dynamic css in main.js, after obj-type css being set 
for now when a box is selected, its objtype class in css is removed so the color is set by selected state.
dynamic set obj-type css has higher priority than this one.
*/
.box-svg-selected{
	stroke: #ff00ff88;
	fill: #ff00ff22;
}

.maincanvas-line{
	/*stroke-dasharray: 3,3;*/

}


#maincanvas-wrapper {
	position: absolute;
	resize:both;
	overflow:hidden;
    top: 0%;
	left: 20%;
	width: 40%;
	height: 30%;
	padding: 0px;
    margin: 0px;
}

#resize-handle {
	position: absolute;
	width: 30px;
	height: 30px;
	right: 0px;
	bottom: 0px;
}
#resize-handle:hover{
	cursor: se-resize;
}


#maincanvas-c {
	position: relative;
	top: 0%;
	left: 0%;
	width: inherit;
	height: 100%;

	padding: 0px;
	box-sizing: border-box;
	text-align: left;
	align-content: left;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}


#obj-editor{
	position: absolute;
	color: #ff00ff;
	background-color: #222;
	font-size: inherit;
	padding: 0px;
	box-sizing: border-box;
	text-align: left;
	display: none; /* defult hidden */
}

#obj-label {
	display: none;
}

#category-id-editor {
	display: none;
	color: inherit;
	background: inherit;
	padding: inherit;
}

#canvas {
	position: absolute;
	top: 70%;
	left: 0%;
	color: #ffff00;
	width: 20%;
	height: auto;
	padding: 0px;
	box-sizing: border-box;
	text-align: left;
	align-content: left;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}
#camera {
	width:100%;
	height:100%;
}

#main-view-grid {
	position: absolute;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;	
}

#context-menu-wrapper {
	position: absolute;
	display: none;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
	z-index: 10;
}

#context-menu, #object-context-menu {
	position: absolute;
	display: block;
	width: 180px;
	background-color: #222;
}

#new-submenu {
	display: none;
	position: absolute;	
	padding-left: 3px;
	width: 120px;
	background-color: #222;
}
.menu-item {
	cursor: pointer;
}
.menu-item:hover {
	background-color: gray;	
}

.menu-item-icon {
	display: inline;	
}
.menu-item-text {
	display: inline;
}

.menu-seperator {
	padding: 0.5px;
	background-color: #333;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}


.float-label {
	color: #0000ff;
	position: absolute;
	display:inline-flex;
	/* background-color: #403b3b99; */
}

.label-obj-id-text, .label-obj-type-text {
	padding-left: 5px;
}

.label-out-view {
	display: none;
}

.selected-float-label {
	color: #ff00ff;
	position: absolute;
	/* background-color: #403b3b99; */
}


.ui-button {
	background-color: #222;
	padding-left: 0;
	padding-right: 0;
	border-width: 1;
	border-color: #222;
	color: yellow;
}

.view-manipulator {
	display: none;  /* default */
}

#z-view-manipulator {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 20%;
	height: 30%;
	background-color: #00000000;
	border-width: 0px;	
}

#y-view-manipulator {
	position: absolute;
	top: 30%;
	left: 0%;
	width: 20%;
	height: 20%;
	background-color: #00000000;
	border-width: 0px;		
}


#x-view-manipulator {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 20%;
	height: 20%;
	background-color: #00000000;
	border-width: 0px;
}



#view-manipulator:hover{
	/* border-color: yellow; */
	
}


.ew-handle:hover{
	cursor: ew-resize;
}

.ns-handle:hover{
	cursor: ns-resize;
}


.nw-handle:hover{
	cursor: nw-resize;
}
.ne-handle:hover{
	cursor: ne-resize;
}

.sw-handle:hover{
	cursor: sw-resize;
}

.se-handle:hover{
	cursor: se-resize;
}

.grab-handle:hover{
	cursor: grab;
}

.v-table-wrapper {
	display: none;
}


td {
	padding: 0px;
}



.svg-line{
	stroke-dasharray: 3,3;
	stroke: #00000000;
	stroke-width: 1px;
	stroke-opacity: 0.6;
}


.subview-svg {
	position: relative;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
}

.v-buttons-wrapper {
	position: absolute;
	bottom: 0%;
	right: 0%;
	background-color: #222;
	margin: 1px;
}
#select-box {
	display: none;
	position: fixed;
	border: 1px solid #55aaff;
	background-color: rgba(75, 160, 255, 0.3);
	
}

#main-view-svg{
	position: absolute;
	top: 0%;
	left: 0%;	
}
.grid-line {
	
	stroke-dasharray: 3,3;
	stroke: yellow;
	stroke-width: 1px;
	stroke-opacity: 0.2;
}